<template>
  <div>
    <div style="background-color: gray;height: 300px;width: 100%">
      <p>
        <button @click="error">click</button>
        <button @click="push('BBB')">BBB</button>
        <button @click="push('CCC')">CCC</button>
        <router-link to="/AAA/BBB">BBB</router-link>
        <router-link to="/AAA/CCC">CCC</router-link>
      </p>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "AAA",
    model: {},
    props: {},
    data() {
      return {}
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      error() {
        throw new Error('123')
      },
      push(path) {
        this.$router.push(path,
          () => {
            console.log('onComplete')
          },
          () => {
            console.log('onAbort')
          })
      }
    },
    beforeEach(){
      console.log('beforeEach')
    },
    beforeLeave(){
      console.log('beforeLeave')
    }
    // beforeRouteUpdate(to,from,next){
    //   next()
    // }
  }
</script>

<style scoped>

</style>
